<template>
  <view class="content">
    <swiper class="swiper" :vertical="true" :autoplay="false" :duration="duration">
      <swiper-item>
        <view style="height: 100%;" class="swiper-item">
          <view class="index1">
            <view class="box">
              <view class="qr">
                <img style="-webkit-touch-callout: none;" src="../../static/image/qrcode.jpg" />
                <view style="margin-top: 10rpx;">{{msg}}</view>
              </view>
              <view class="btns">
                <image src="../../static/image/android.png" @click="downLoad('android')"></image>
                <image src="../../static/image/iPhone.png" @click="downLoad('ios')"></image>
              </view>
              <view class="kongbai"></view>
            </view>
          </view>
        </view>
      </swiper-item>
      <swiper-item>
        <view style="height:calc( 100% - 50px )">
          <swiper class="swiper"  indicator-active-color="#fff" :indicator-dots="true" :duration="duration">
            <swiper-item>
              <view style="height:100%">
                <image style="width: 100vw; height: 100%;" src="../../static/image/bg_2.jpg"></image>
              </view>
            </swiper-item>
            <swiper-item>
              <view style="height: 100vh;"> <image style="width: 100vw; height: 100%;" src="../../static/image/bg_3.jpg"></image></view>
            </swiper-item>
          </swiper>
        </view>
      </swiper-item>
      <swiper-item>
        <view style="height:calc( 100% - 50px )">
          <swiper class="swiper" indicator-active-color="#fff" :indicator-dots="true" :duration="duration">
            <swiper-item>
              <view style="height: 100vh;">
                <image style="width: 100vw; height: 100vh;" src="../../static/image/tips1.png"></image>
              </view>
            </swiper-item>
            <swiper-item>
              <view style="height: 100vh;"> <image style="width: 100vw; height: 100vh;" src="../../static/image/tips2.jpg"></image></view>
            </swiper-item>
          </swiper>
        
        </view>
      </swiper-item>
    </swiper>
    <view class="kongbai"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      duration: 500,
      msg:""
    }
  },
  onLoad() { 
    if(uni.getSystemInfoSync().platform == 'ios'){
      this.msg = '扫码识别加入塞波尔公众号'
    }else{
      this.msg = '长按识别加入塞波尔公众号'
    }
    
    
  },
  methods: {


    downLoad(type) {
            let url = 'https://h5.yygamefi.com/download/SPEO-release.apk';
            if(type == 'ios'){
              url = 'itms-services:///?action=download-manifest&url=https://h5.yygamefi.com/download/manifest.plist'
            }
            let a = document.createElement('a');
            let body = document.querySelector('body')
            console.log(a)
            a.download = 'yygamefi.zip';
            a.href = url;
            a.target = '_blank';
            console.log(body)
            body.appendChild(a);
            a.click();
            body.removeChild(a);
    }
  },
}
</script>

<style lang="scss">
.content{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 2000;
  
}
.swiper {
   height: calc(100vh - 50px)
}

.index1 {
  position: relative;
  width: 100%;
  height: 100%;
  background: url('../../static/image/bg_1.jpg') no-repeat;
  background-size:cover;
}

.box {
  position: absolute;
  bottom: 200rpx;
  left: 50%;
  transform: translateX(-50%);
}

.qr {
  width: 100%;
  font-size: 16rpx;
  display: flex;
  align-items: center;
  flex-direction: column;

  img {
    width: 200rpx;
    height: 200rpx;
    -webkit-touch-callout: none;
  }

}

.btns {
  margin-top: 70rpx;
  width: 100%;
  display: flex;
  justify-content: space-between;

  image {
    width: 345rpx;
    height: 100rpx;
  }

}</style>
